<template>
    <div class="container-box-container">
        <div class="control-area border-radius8">
            <div class="flex-box flex-center flex-align-items-center">
                <div class="margin320 width-25 text-center rightBorder">
                    <p class="fontSize16 color333">
                        全部订单/笔
                        <!-- <el-tooltip class="item" effect="dark" content="查询时间内的全部订单总数，默认近30天" placement="top">
                            <div class="titleTop titleTopBorderColor2 spanLabelFontColor2">?</div>
                        </el-tooltip> -->
                    </p>
                    <p class="fontSize30 colorMain line-height55 margin0">{{statisticsObj&&statisticsObj.totalOrderCount ? statisticsObj.totalOrderCount : 0}}</p>
                </div>
                <div class="margin320 width-25 text-center rightBorder">
                    <p class="fontSize16 color333">
                        全部订单金额/元
                        <!-- <el-tooltip class="item" effect="dark" content="查询时间内的全部订单总金额，默认近30天" placement="top">
                            <div class="titleTop titleTopBorderColor2 spanLabelFontColor2">?</div>
                        </el-tooltip> -->
                    </p>
                    <p class="fontSize30 colorMain line-height55 margin0">{{statisticsObj&&statisticsObj.totalOrderMoney ? statisticsObj.totalOrderMoney : 0}}</p>
                </div>
                <div class="margin320 width-25 text-center rightBorder">
                    <p class="fontSize16 color333">
                        已核销订单/笔
                        <!-- <el-tooltip class="item" effect="dark" content="查询时间内已核销的订单数，默认近30天" placement="top">
                            <div class="titleTop titleTopBorderColor2 spanLabelFontColor2">?</div>
                        </el-tooltip> -->
                    </p>
                    <p class="fontSize30 colorMain line-height55 margin0">{{statisticsObj&&statisticsObj.verifCount ? statisticsObj.verifCount : 0}}</p>
                </div>
                <div class="margin320 width-25 text-center rightBorder">
                    <p class="fontSize16 color333">
                        已核销金额/元
                        <!-- <el-tooltip class="item" effect="dark" content="查询时间内已核销的订单总金额，默认近30天" placement="top">
                            <div class="titleTop titleTopBorderColor2 spanLabelFontColor2">?</div>
                        </el-tooltip> -->
                    </p>
                    <p class="fontSize30 colorMain line-height55 margin0">{{statisticsObj&&statisticsObj.verifMoney ? statisticsObj.verifMoney : 0}}</p>
                </div>
                <div class="margin320 width-25 text-center rightBorder">
                    <p class="fontSize16 color333">
                        未核销订单/笔
                        <!-- <el-tooltip class="item" effect="dark" content="查询时间内的未核销订单总数，默认近30天" placement="top">
                            <div class="titleTop titleTopBorderColor2 spanLabelFontColor2">?</div>
                        </el-tooltip> -->
                    </p>
                    <p class="fontSize30 colorMain line-height55 margin0">{{statisticsObj&&statisticsObj.unVerifCount ? statisticsObj.unVerifCount :0}}</p>
                </div>
                <div class="margin320 width-25 text-center">
                    <p class="fontSize16 color333">
                        未核销金额/元
                        <!-- <el-tooltip class="item" effect="dark" content="查询时间内的未核销订单总金额，默认近30天" placement="top">
                            <div class="titleTop titleTopBorderColor2 spanLabelFontColor2">?</div>
                        </el-tooltip> -->
                    </p>
                    <p class="fontSize30 colorMain line-height55 margin0">{{statisticsObj&&statisticsObj.unVerifMoney ? statisticsObj.unVerifMoney :0}}</p>
                </div>
            </div>
        </div>
        <Page class="main_content">
            <PageCard title="订单列表" class="margin0">
                <template #actions>
                    <el-button slot="reference" :disabled="queryForm.status==8" v-has="'shopping:groupPurchase:notice'" class="ed-button ed_black-bottom ed-button36" @click="noticeBtn()"><svg-icon icon-class="add-svg"/>通知</el-button>
                    <!-- <el-button class="ed-button ed_black-bottom ed-button36" @click="add()" v-has="'shopping:resourcePool:add'"><svg-icon icon-class="add-svg"/>添加商品</el-button> -->
                    <el-button slot="reference" v-has="'shopping:groupPurchase:export'" class="ed-button ed_white_bottom marginRight8 ed-button36" @click="exportBtn()"><i class="el-icon-upload2"></i>导出</el-button>
                </template>
                <div class="content">
                    <div class="search_box">
                        <el-input v-model="queryForm.productName" placeholder="请输入商品名称" />
                        <EdSelect v-model="queryForm.productSource" :selectParams="selectSource"></EdSelect>
                        <el-input v-model="queryForm.orderNo" placeholder="请输入订单编号" />
                        <EdSelect v-model="queryForm.villageId" :selectParams="selectProject"></EdSelect>
                        <EdSelect v-model="queryForm.status" :selectParams="selectOrderStatus"></EdSelect>
                        <!-- <EdDateTimeRange ref="timeRange" @emit-echo-time-range="emitEchoTimeDate($event, 'pickerTime')"></EdDateTimeRange> -->
                        <EdDateTimePickerRange v-model="queryForm.pickerTime"  @emit-echo-time-range="emitEchoTimeDate($event, 'pickerTime')" :pickerParams="pickerRangeParams"></EdDateTimePickerRange>
                        <el-button class="ed-button ed_black-bottom" @click="search()"><svg-icon class="svg-middle" icon-class="search-svg"/>查 询</el-button>
                        <el-button class="ed-button ed_white_bottom" @click="reset()"><svg-icon icon-class="reset-svg"/>重 置</el-button>
                    </div>
                    <ApiTable :api="load" ref="table" :params="queryForm">
                        <el-table-column type="index" width="80" label="序号"></el-table-column>
                        <el-table-column width="250" :show-overflow-tooltip="true" prop="orderNo" label="订单编号" :formatter="formatter"></el-table-column>
                        <el-table-column :show-overflow-tooltip="true" prop="orderName" label="商品名称" :formatter="formatter"></el-table-column>
                        <el-table-column :show-overflow-tooltip="true" prop="productSource" label="来源">
                            <template slot-scope="scope">
                                <span>{{returnName(scope.row['productSource'], selectSource.options) || scope.row['productSource'] || '-'}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column :show-overflow-tooltip="true" prop="" label="订单金额">
                            <template slot-scope="scope">
                                <div v-if="scope.row['totalMoney'] && !scope.row['totalPoint']">{{ scope.row['totalMoney'] }}元</div>
                                <div v-if="!scope.row['totalMoney'] && scope.row['totalPoint']">{{ scope.row['totalPoint'] }}积分</div>
                                <div v-if="scope.row['totalMoney'] && scope.row['totalPoint']">{{ scope.row['totalMoney'] }}元+{{ scope.row['totalPoint'] }}积分</div>
                            </template>
                        </el-table-column>
                        <el-table-column :show-overflow-tooltip="true" prop="villageName" label="所属项目" :formatter="formatter"/>
                        <el-table-column :show-overflow-tooltip="true" prop="" label="客户信息">
                            <template slot-scope="scope">
                                <div>{{ scope.row.buyerName || '-'}}</div>
                                <div>{{ scope.row.buyerPhone || '-' }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column :show-overflow-tooltip="true" prop="createTime" label="创建时间" :formatter="formatter"></el-table-column>
                        <el-table-column :show-overflow-tooltip="true" prop="userName" label="核销人员" :formatter="formatter"></el-table-column>
                        <el-table-column :show-overflow-tooltip="true" prop="status" label="订单状态">
                            <template slot-scope="scope">
                                <div><span :class="['spanLabel spanLabelWidth marginRight8', 'spanLabelColor'+scope.row.status]"></span>{{returnName(scope.row['status'], selectOrderStatus.options) || scope.row['status'] || '-'}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column :show-overflow-tooltip="true" prop="" label="操作" width="150">
                            <template slot-scope="scope">
                                <el-button class="ed-table-bottom ed_black_border" v-has="'shopping:groupPurchase:details'" @click="seeRow(scope.row)">查看</el-button>
                            </template>
                        </el-table-column>
                    </ApiTable>
                </div>
            </PageCard>
        </Page>
        <EdDialog :width="'600px'" :title="'通知'" ref="noticeDialog" class="noticeDialog" v-if="noticeVisible"  @close-dialog="noticeClose" @save-dialog="noticeSave('noticeForm')">
            <div class="content">
                    <div class="header">
                        <i class="el-icon-warning" style="color:#EED096;font-size: 18px;"></i>&nbsp;
                        <span>即将给{{notice_total}}位待核销用户发送提货通知!</span>
                    </div>
                    <div class="main">
                        <el-form ref="noticeForm" :model="noticeForm" label-position="right" label-width="auto">
                            <el-row>
                                <el-col :span="20">
                                    <el-form-item label="到货站点" prop="arrivalSite" :rules="$validate.validates({required:true,msg:'不能为空'})">
                                        <el-input v-if="notice_address_list.length==0" class="flex-input el-dropdown-link" v-model="noticeForm.arrivalSite" @blur="handleAddressBlur" maxlength="50"></el-input>
                                        <el-dropdown v-else placement="bottom-start" trigger="click" @command="handleCommand($event, 'arrivalSite')">
                                            <el-input ref="inputRef" class="flex-input el-dropdown-link" v-model="noticeForm.arrivalSite" @blur="handleAddressBlur" maxlength="50"></el-input>
                                            <el-dropdown-menu slot="dropdown">
                                                <el-dropdown-item v-for="item in notice_address_list" :key="item" :command="item">{{item}}</el-dropdown-item>
                                            </el-dropdown-menu>
                                        </el-dropdown>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="20">
                                    <el-form-item label="时间" prop="time" :rules="$validate.validates({required:true,msg:'不能为空'})">
                                        <EdDateTimePickerRange v-model="noticeForm.time"  @emit-echo-time-range="emitEchoTimeDate_1($event, 'time')" :pickerParams="pickerRangeParams"></EdDateTimePickerRange>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="20">
                                    <el-form-item label="电话" prop="phone" :rules="$validate.validates({required:false,msg:'不能为空',type:'tel'})">
                                        <el-input v-if="notice_phone_list.length==0" class="flex-input el-dropdown-link" v-model="noticeForm.phone" @blur="handlePhoneBlur"></el-input>
                                        <el-dropdown v-else placement="bottom-start" trigger="click" @command="handleCommand($event, 'phone')">
                                            <el-input class="flex-input el-dropdown-link" v-model="noticeForm.phone" @blur="handlePhoneBlur"></el-input>
                                            <el-dropdown-menu slot="dropdown">
                                                <el-dropdown-item v-for="item in notice_phone_list" :key="item" :command="item">{{item}}</el-dropdown-item>
                                            </el-dropdown-menu>
                                        </el-dropdown>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </div>
            </div>
        </EdDialog>
    </div>
</template>

<script>
    import EdTable from "src/components/EdTable.vue";
    import EdSelect from 'src/components/EdSelect.vue'
    import EdDateTimeRange from 'src/components/EdDateTimeRange.vue'
    import EdDateTimePickerRange from 'src/components/EdDateTimePickerRange.vue'
    import EdDialog from 'src/components/EdDialog.vue';
    import {purchaseList, getStaticsData, purchaseExport, purchaseNotice, getProjectList} from "./api";
    import Page from '../../components/Page.vue'
    import PageCard from 'src/views/components/PageCard.vue'
    import ApiTable from 'src/components/ApiTable.vue'
    import { defineComponent } from 'vue'
    import { returnName } from "src/utils/common.js";
    import { getDictByCode } from "src/api/dictionaries";
    export default defineComponent({
        name: "purchaseList",
        components:{ EdTable, Page, PageCard, ApiTable,EdSelect,EdDateTimeRange, EdDialog, EdDateTimePickerRange },
        data(){
            return{
                queryForm:{
                    productName: '',
                    productSource: '',
                    orderNo:"",
                    villageId: '',
                    status:"",
                    pickerTime: '',
                    endTime:"",
                    startTime:"",
                },
                pickerRangeParams:{
                    valueFormat:"yyyy-MM-dd HH:mm"
                },
                statisticsObj: {
                    totalOrderCount: 0,
                    totalOrderMoney: 0,
                    verifCount: 0,
                    verifMoney: 0,
                    unVerifCount: 0,
                    unVerifMoney: 0,
                },
                selectChannel:{  // 渠道
                    placeholder:"请选择渠道",
                    options: [
                        { value: '1', label: '产品库' },
                        { value: '2', label: '线下商家' },
                    ]
                },
                selectOrderStatus:{  // 订单状态
                    placeholder:"请选择订单状态",
                    options: []
                },
                selectSource:{
                    placeholder:"请选择来源",
                    options: [],
                    clearable: true
                },
                selectProject: {
                    placeholder:"请选择所属项目",
                    options: [],
                    props: {label:"villageName", value:"villageId"}
                },
                // 通知
                pickerRangeParams:{
                    valueFormat:"yyyy-MM-dd HH:mm"
                },
                noticeVisible: false,
                // noticeVisible: true,
                notice_total: '',
                noticeForm:{
                    arrivalSite: '',
                    time: '',
                    pickUpStartTime:"",
                    pickUpEndTime:"",
                    phone: '',
                },
                notice_address_list: [], 
                notice_phone_list: [], 
            }
        },
        activated(){
            // 来源
            getDictByCode('product_source').then(res=>{
                this.selectSource.options = res.data.items;
            })
            // 订单状态
            getDictByCode('order_status_type').then(res=>{
                this.selectOrderStatus.options = res.data.items;
            });
            // 获取 所属项目
            getProjectList({page: 1, pageSize: 999999}).then(res=>{
                this.selectProject.options = res.data.records;
            })
             // 统计数据
            this.getStaticsData();
            this.$nextTick(()=>{
                this.$refs.table.load(1)
            })
        },
        methods:{
            load:purchaseList,
            getStaticsData(){
                getStaticsData({}).then(response => {
                    if(response.code == 20000) {
                        this.statisticsObj = response.data;
                    }
                })
            },
            search(){
                // if(this.queryForm.startTime){
                //     this.getStaticsData();
                // }
                // delete this.queryForm['pickerTime'];
                this.$refs.table.load(1)
            },
            reset(){
                this.queryForm = {
                    productName: '',
                    productSource: '',
                    orderNo:"",
                    villageId: '',
                    status:"",
                    pickerTime: '',
                    endTime:"",
                    startTime:"",
                };
                // this.$refs.timeRange.reset();
                this.$nextTick(()=>{
                    this.$refs.table.load(1,10)
                })
            },
            seeRow(row){
                this.$router.push({
                    path: '/shopping/groupPurchase-detail',
                    query: { id: row.orderNo },
                })
            },
            emitEchoTimeDate(data){
                // $event 子组件$emit传的参数 
                this.queryForm['startTime'] = data.startTime;
                this.queryForm['endTime'] = data.endTime;
            },
            emitEchoTimeDate_1(data, name){
                // $event 子组件$emit传的参数 
                // this.noticeForm[name] = data;
                this.noticeForm['pickUpStartTime'] = data.startTime;
                this.noticeForm['pickUpEndTime'] = data.endTime;
            },
            // 通知
            noticeBtn(){
                this.getLocalStorage('notice_address_list');
                this.getLocalStorage('notice_phone_list');
                let params = {
                    ...this.queryForm,
                    pageSize: 99999
                }
                purchaseList(params).then(res=>{
                    let data_list = res.data&&res.data.records || [];
                    data_list = data_list.filter((item, index)=>{
                        return item['status'] == 9
                    })
                    this.notice_total = data_list&&data_list.length;
                    this.noticeVisible = true;
                    this.$nextTick(()=>{
                        this.$refs.noticeDialog.disabled = this.notice_total==0 ? true : false
                    })
                })
            },
            noticeClose(){
                this.noticeForm={
                    arrivalSite: '',
                    time: '',
                    pickUpStartTime:"",
                    pickUpEndTime:"",
                    phone: '',
                }
                this.notice_total = '';
                this.noticeVisible = false;
                this.$refs.noticeForm.resetFields()
            },
            noticeSave(formName){
                this.$refs[formName].validate((valid) => {
                    if(valid){
                        delete this.noticeForm['time'];
                        let params = {
                        ...this.queryForm,
                        ...this.noticeForm
                        }
                        purchaseNotice(params).then(response => {
                            if(response.success == true) {
                                this.$message.success({
                                    message: '处理成功！',
                                    duration: 2000,
                                    center:true
                                });
                                this.noticeClose()
                                this.$refs.table.load()
                            }
                        }).catch(()=>{
                            this.$refs.noticeDialog.hideLoading()
                        })
                    }else{
                        this.$refs.noticeDialog.hideLoading()
                    }
                })
                
            },
            // 导出
            exportBtn(){
                let page = this.$refs.table.page.total;
                if(page > 0){
                    purchaseExport(this.queryForm).then((res) =>{
                        // console.log('导出', res)
                    })
                }else{
                    this.$message.info({
                        message:"暂无数据导出",
                        duration: 2000,
                        center:true
                    })
                }
            },
            exportSuccess(){
                this.isEdExport = false;
            },
            returnName(val, options, value, label){
                return returnName(val, options, value, label)
            },
            handleAddressBlur(e){
                this.setLocalStorage(e, 'notice_address_list');
                // this.getLocalStorage('notice_address_list');
            },
            handleCommand(command, name){
                this.$set(this.noticeForm, name, command);

                this.$refs.inputRef.focus();
                this.$refs.inputRef.blur();
            },
            handlePhoneBlur(e){
                this.setLocalStorage(e, 'notice_phone_list');
                // this.getLocalStorage('notice_phone_list');
            },
            // 取 localStorage
            getLocalStorage(name){
                this[name] = JSON.parse(localStorage.getItem(name))|| [];
            },
            // 存 localStorage
            setLocalStorage(e, name){
                let value = e.target.value;
                let arr = JSON.parse(localStorage.getItem(name))|| [];
                if(value && !arr.includes(value)){
                    arr.unshift(e.target.value);
                    if(arr.length>5) arr=arr.splice(0, 5);
                    localStorage.setItem(name, JSON.stringify(arr));
                }
            },
            formatter(row, column, cellValue, index){
                return cellValue || '-'
            }
        }
    })
</script>

<style scoped lang="scss">
    .spanLabel{
        width: 8px;height: 8px;border-radius: 50%;display: inline-block;vertical-align: 1px
    }
    .spanLabelWidth{
        width: 6px;height: 6px;
    }
    .titleTop{
        border: 1px solid rgba(0, 0, 0, 0.65);width: 14px;height: 14px;line-height: 14px;
        border-radius: 50%;font-size: 12px;text-align: center;display: inline-block;vertical-align: 1px;margin-left: 4px;
    }

    .titleTopBorderColor1{
        border-color: rgba(0, 0, 0, 0.65);
    }
    .titleTopBorderColor2{
        border-color: #FAAD14;
    }
    .titleTopBorderColor3{
        border-color: #52C41A;
    }
    .titleTopBorderColor4{
        border-color: #1890FF;
    }
    .titleTopBorderColor5{
        border-color: #B7B7B7;
    }
    .spanLabelColor10{
        background-color: #65A9A5 !important;
    }
    .spanLabelColor0{
        background-color: #65A9A5 !important;
    }
    .spanLabelColor9{
        background-color: #EED096 !important;
    }
    .spanLabelColor8{
        background-color: #414448 !important;
    }
    .spanLabelColor6{
        background-color: #EE7171 !important;
    }
    .spanLabelColor99{
        background-color: #EE7171 !important;
    }
    .colorMain{
        color: #DDB15C !important;
    }
    :deep .noticeDialog{
        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: 400;
        font-size: 18px;
        .el-dialog__body{
            padding-left: 40px;
        }
        .header{
            color: #1E1E1E;
            margin-bottom: 30px;
        }
        .main{
            color: #606266;
            .el-input{
                width: 100%;
            }
        }
        .el-date-editor.el-range-editor.el-input__inner{
            width: 100% !important;
        }
        .el-dropdown {
            width: 100% !important;
        }
    }
    :deep .main_content {
        >.header{
            display:none !important;
        }
        .search_box{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 20px;
            >div{
                margin-right: 10px;
            }
        }
        .content .el-input {
            width: unset;
        }
    }
</style>